<template>
  <div class="container">
      <a-page-header
       class="header"
        title="ids运行状态管理"
        sub-title="ids运行状态信息"
    />
    
    <!-- 主机ip -->
    <a-row>
      <a-space :size="20">
        <span class="title-text">监控的网卡地址:</span>
        <a-tag color="green" v-if="idsStatus != null">
          {{idsStatus.monitor_address}}
        </a-tag>
      </a-space>
    </a-row>
    <div style="dispaly:block;height:20px;width:100%"></div>
    <!-- 状态及操作按钮 -->
    <a-row>
       <a-space :size="200">
        <a-space :size="20">
          <span class="title-text">状态：</span> 

          <a-tag color="orange" v-if="idsStatus != null && idsStatus.idsRunning == 0">
            closed
          </a-tag>       
          <a-tag color="green" v-if="idsStatus != null && idsStatus.idsRunning == 1">
            running
          </a-tag>      

          <a-button type="link" icon="poweroff" @click="updateIdsStatus">
            刷新
          </a-button>
        </a-space>
        <a-space :size="30">
          <a-button type="danger" icon="poweroff" :loading="iconCloseLoading" @click="enterIconCloseLoading">
            关闭
          </a-button>
          <a-button type="primary" icon="poweroff" :loading="iconOpenLoading" @click="enterIconOpenLoading">
            开启
          </a-button>
        </a-space>
       </a-space>
    </a-row>
    <div style="dispaly:block;height:20px;width:100%"></div>

    <a-row>
      <a-space :size="20">
        <span class="title-text">监控主机信息:</span>
        
        <span v-if="systemInfo != null"> address: {{systemInfo.address}}; &nbsp;&nbsp;&nbsp;&nbsp; os: {{systemInfo.system_name}} ;&nbsp;&nbsp;&nbsp; max-disk: {{systemInfo.total_size}}GB;&nbsp;&nbsp;&nbsp; max-mamory: {{systemInfo.total_memory_size}}MB</span>
      
      </a-space>
    </a-row>

    <div style="dispaly:block;height:20px;width:100%"></div>

    <!-- <pie-graph-2/>
    <pie-graph-2/> -->
    <!-- 详情 -->
    <a-row class="detail-panel">
      <p class="title-text">详情：</p>
      <a-row type="flex" justify="space-between" align="middle">
        <a-col :span="8" class="grid-content">
          <a-card size="small" title="ids线程池工作状态" style="width: 400px;">
            <a-button type="link" slot="extra" @click="updateIdsStatus">刷新</a-button>
            <div style="width:100%;height:300px">
              <PieGraph ref="threadStatus" :data="threadStatus" :centerTitle="运行状况"/>
            </div>
            <!-- <PieGraph :data="threadStatus" centerText="工作状态" /> -->
            <!-- <PieGraph :data="threadStatus" centerText="工作状态" /> -->
            <!-- <pie-graph-2/> -->
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card size="small" title="磁盘使用信息" style="width: 400px">
             <a-button type="link" slot="extra" @click="updateDiskInfo">刷新</a-button>
             <div style="width:100%;height:300px">
              <PieGraph ref="diskInfoGraph" :data="diskInfoGraph" :centerTitle="磁盘状况"/>
            </div>
              
           </a-card>
        </a-col>
        <a-col :span="8">
           <a-card size="small" title="监控主机内存状况" style="width: 400px">
            <a-button type="link" slot="extra" @click="updateIdsStatus">刷新</a-button>
            <div style="width:100%;height:300px">
              <PieGraph ref="systemInfoGraph" :data="systemInfoGraph" :centerTitle="内存占用"/>
            </div>
           </a-card>
        </a-col>
      </a-row>
       <div style="dispaly:block;height:20px;width:100%"></div>
       <a-row type="flex" justify="space-between" align="middle">
        <a-col :span="8" class="grid-content">
          <a-card size="small" title="CPU使用状态" style="width: 400px">
            <a-button type="link" slot="extra" @click="updateIdsStatus">刷新</a-button>
            <div style="width:100%;height:300px">
              <PieGraph ref="cpuLoadStatus" :data="cpuLoadStatus" :centerTitle="CPU状况"/>
            </div>
          </a-card>
        </a-col>
      </a-row>
         <div style="dispaly:block;height:20px;width:100%"></div>
    </a-row>

    <!-- <ContentCard v-for="(item, idx) in contents" :key="idx" :content_card_title="item.content_card_title" :content_card_items="item.content_card_items"/> -->
  </div>
</template>
<script >

import {getCpuLoad, getDiskInfo, getIdsPoolStatus, getSystemInfo} from "@/api/system_info/system_info"
import {start, stop} from "@/api/ids/ids_controller"

import PieGraph from "@/components/echart/pie-graph.vue"

export default {
  components:{
    PieGraph,
    // PieGraph2,
  },
  data() {
    return {
      systemInfo: null,
      diskInfo: null, 
      idsStatus: null,
      cpuInfo: null,
      iconCloseLoading: false,
      iconOpenLoading: false,
      threadStatus: [],
      diskInfoGraph: [],
      cpuLoadStatus: [],
      systemInfoGraph: []
    };
  },
  methods: {
    enterIconCloseLoading(){
      this.iconCloseLoading = true;
      stop().then(
        (resp)=>{
          // console.log(resp.data)
          this.iconCloseLoading = false;
          this.updateIdsStatus();
        },
        (err)=>{}
      )
    },
    enterIconOpenLoading(){
      this.iconOpenLoading = true;
      start().then(
        (resp)=>{
          this.iconOpenLoading = false;
          this.updateIdsStatus();
        },
        (err)=>{}
      );
    },
    // 
    updateIdsStatus(){
      getIdsPoolStatus().then(
        (resp)=>{
        this.idsStatus = resp.data
        console.log(this.idsStatus)
        // 更新图表数据
        var tThreadStatus = []
        // { value: 1048, name: 'Search Engine' }
        tThreadStatus.push({ name: '工作线程数', value: this.idsStatus.activeWorkerNum})
        tThreadStatus.push({ name:'总任务数', value: this.idsStatus.taskNum})
        tThreadStatus.push({ name:'队列中任务数', value: this.idsStatus.taskOfQueueNum})
        tThreadStatus.push({ name:'已完成任务数', value: this.idsStatus.completedTaskNum})
        this.threadStatus = tThreadStatus
        this.$refs.threadStatus.initChart();
        this.$message.success("更新完成")
        }, 
        (err)=>{
          console.log("request error", err)
      });
    },
    // 
    updateDiskInfo(){
      getDiskInfo().then(
      (resp)=>{
        this.diskInfo = resp.data
        var tDiskInfoGraph = []
        tDiskInfoGraph.push({ name: '总容量（GB）', value: this.diskInfo.total_size})
        tDiskInfoGraph.push({ name: '可用容量（GB）', value: this.diskInfo.free_size})
        this.diskInfoGraph = tDiskInfoGraph
        this.$refs.diskInfoGraph.initChart()
        this.$message.success("更新完成")
      }, 
      (err)=>{
        console.log("request error", err)
    });
    },
    updateCpuLoad(){
      getCpuLoad().then(
      (resp)=>{
        this.cpuInfo = resp
        var t = []
        t.push({ name: 'CPU占用率', value: this.cpuInfo.data})
        t.push({ name: '总资源', value: 100})
        this.cpuLoadStatus = t
        this.$refs.cpuLoadStatus.initChart()
      }, 
      (err)=>{
        console.log("request error", err)
     });
    },
    updateSystemInfo(){
      getSystemInfo().then(
      (resp)=>{
        this.systemInfo = resp.data
        var t = []
        t.push({ name: '总内存(MB)', value: this.systemInfo.total_memory_size})
        t.push({ name: '已用内存(MB)', value: this.systemInfo.free_memory_size})
        this.systemInfoGraph = t;
        this.$refs.systemInfoGraph.initChart()
      },
      (err)=>{
        console.log("request error", err)
      }
    )
    }
  },
  created(){
    // getCpuLoad().then(
    //   (resp)=>{
    //     this.cpuInfo = resp.data
    //   }, 
    //   (err)=>{
    //     console.log("request error", err)
    // });
    this.updateCpuLoad();
    this.updateDiskInfo();
    // getDiskInfo().then(
    //   (resp)=>{
    //     this.diskInfo = resp.data
    //   }, 
    //   (err)=>{
    //     console.log("request error", err)
    // });
    this.updateIdsStatus()
    // getIdsPoolStatus().then(
    //   (resp)=>{
    //     this.idsStatus = resp.data
    //     console.log(this.idsStatus)
    //     // 更新图表数据
    //     var tThreadStatus = []
    //     tThreadStatus.push({ type: '活跃线程数', value: this.idsStatus.activeWorkerNum})
    //     tThreadStatus.push({ type:'总任务数', value: this.idsStatus.taskNum})
    //     tThreadStatus.push({ type:'队列任务数', value: this.idsStatus.taskOfQueueNum})
    //     tThreadStatus.push({ type:'已完成', value: this.idsStatus.completedTaskNum})
    //     this.threadStatus = tThreadStatus
    //   }, 
    //   (err)=>{
    //     console.log("request error", err)
    // });
    this.updateSystemInfo()
  }
};
</script>

<style lang="less" scoped>
.container{
  height: 100%;
  width: 100%;
  padding-left: 5%;
  padding-right: 5%;
  // background-color:grey;
}

.title-text{
  font-size: 18px;
  font-weight: bold;
}

.header{
  margin-left: -30px;
}

.detail-panel{
  background-color: antiquewhite;
  margin-bottom: 20px;
}

.grid-content{
  display: flex;
  justify-content: center;
}
</style>
